<!-- 主链管理 -->
<template>
    <div class="table-box">
      <div class="table-search">
        <el-form :inline="true" :model="form">
          <el-form-item label="分类名称">
            <el-input v-model="form.category" placeholder="分类名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onQuery">查询</el-button>
            <el-button @click="onReset">重置</el-button>
            <el-button type="primary" plain @click="onAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="card content-box">
        <div class="table">
          <el-table :data="tableData" border v-loading="loading">
            <el-table-column prop="id" label="ID" align="center" />
            <el-table-column prop="name" label="英语名称" align="center" />
            <el-table-column prop="name_id" label="印尼语名称" align="center" />
            <el-table-column prop="category" label="分类" align="center" />
            <el-table-column label="Icon图" align="center" width="110">
            <template #default="scope">
              <el-image
                :src="scope.row.icon_show"
                alt
                fit="fill"
                :preview-src-list="[scope.row.icon_show]"
                :preview-teleported="true"
              ></el-image>
            </template>
          </el-table-column>
            <el-table-column prop="rank" label="排序" align="center" />
            <el-table-column prop="create_time" label="添加时间" align="center" :formatter="formatterTime" width="180" />
            <el-table-column prop="update_time" label="更新时间" align="center" :formatter="formatterTime" width="180" />
            <el-table-column label="操作" align="center" fixed="right" width="120">
              <template #default="scope">
                <el-button type="primary" plain @click="onEdit(scope.$index, scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="table-pagination">
            <el-pagination :current-page="pageable.pageNum" :page-size="pageable.pageSize" :page-sizes="[10, 25, 50, 100]"
              :background="true" layout="total, sizes, prev, pager, next, jumper" :total="pageable.total"
              @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
          </div>
        </div>
      </div>
  
      <DialogForm @cancel="cancel" @closeDialog="closeDialog" @submitForm="submit" :dialogFormVisible="dialogFormVisible"
        :dialogForm="dialogForm" :btnLoading="btnLoading" />
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, reactive } from "vue";
  
  import { formatterTime } from "@/utils/utils";
  import { gameCategoryListApi, gameCategoryUpdateApi } from "@/api/moby/game/game";
  import DialogForm from "./components/dialogForm.vue";
    
  const dialogFormVisible = ref(false);
  const tableData = ref([]);
  
  const loading = ref(false);
  const btnLoading = ref(false);
  const pageable = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0,
  });
  const formData = {
    category: "",
  };
  const form = reactive({ ...formData });
  const dialogFormData = {
    category: "",
    name: "",
    rank: "",
  };
  
  const dialogForm = reactive({ ...dialogFormData });
  
  // 参数
  const param = () => {
    return {
      page: pageable.pageNum,
      pagesize: pageable.pageSize,
      category: form.category,
    };
  };
  
  //重置
  const onReset = () => {
    Object.assign(form, formData);
  };
  // 查询
  const onQuery = () => {
    getTbaleData();
  };
  //新增
  const onAdd = () => {
    dialogForm.id = null;
    dialogFormVisible.value = true;
  };
  //关闭弹窗
  const closeDialog = () => {
    dialogFormVisible.value = false;
    Object.assign(dialogForm, dialogFormData);
  };
  
  // 取消
  const cancel = () => {
    dialogFormVisible.value = false;
    Object.assign(dialogForm, dialogFormData);
  };
  // 提交
  const submit = async (param) => {
    console.log(param);
    try {
      btnLoading.value = true;
      const res = await gameCategoryUpdateApi(param);
      ElMessage({
        message: res.message,
        type: "success",
      });
      dialogFormVisible.value = false;
      btnLoading.value = false;
      getTbaleData();
    } catch (error) {
      btnLoading.value = false;
      dialogFormVisible.value = false;
    }
  };
  
  // 表格按钮操作
  const onEdit = (index, row) => {
    Object.assign(dialogForm, { ...row });
    dialogFormVisible.value = true;
  };
  
  // 获取表格数据
  const getTbaleData = async () => {
    loading.value = true;
  
    try {
      const res = await gameCategoryListApi(param());
      loading.value = false;
      tableData.value = res.data.results;
      pageable.total = res.data.count;
    } catch (error) {
      loading.value = false;
    }
  };
  
  // 条数
  const handleSizeChange = (number) => {
    pageable.pageSize = number;
    getTbaleData();
  };
  
  // 页码
  const handleCurrentChange = (number) => {
    pageable.pageNum = number;
    getTbaleData();
  };
  onMounted(() => {
    getTbaleData();
  });
  </script>
  